<template>
<view class="waimaiContainer">
  <view>
    <title-component v-if="title" :receiveData="title"></title-component>
  </view>
  <!-- 左边的导航 -->  
  <scroll-view scroll-y class="leftScrollType">
     <view v-for="(type, index) in typeGroup" :key="index" :data-id="type.id" data-type="two" @tap="selectTypeFun(type)" :class="(type.active?'activeTypeItem':'TypeItem')" :style="'border-bottom:' + (type.active?'2rpx solid '+setting.platformSetting.defaultColor:'') + ';color:' + (type.active?setting.platformSetting.defaultColor:'')">
        <view class="typeName">{{type.groupName}}</view>
        </view>
       
      <view class="bottomHeight"></view>
  </scroll-view>
  <!-- 右边的商品列表 -->
  <scroll-view scroll-y @scrolltolower="onReachBottom2" class="RightProductContainer">
    <image mode="widthFix" @click.stop="linkUrl" :data-link="currentItem.bannerLink" :src="currentItem.banner" style="height:200rpx;width:100%" v-if="currentItem.banner&&currentItem.banner!=', '"></image>
    <view v-if="taskType.length==0" class="none">
      <image mode="widthFix" src="../../static/icons/no-product.png"></image>
      <text>没有相关分类</text>
    </view>
    <view class="taskTypeTwoList" v-else>
        <view class="taskTypeTwoItem" v-for="(result, index) in taskType" :key="index" :data-link="'task_list.html?groupId='+currentItem.id+'&taskTypeId=' + result.id" @tap="linkUrl">
          <image class="taskTypeTwoItemImg" :style="{borderRadius:result.type=='allType'?'100rpx':'0',padding:result.type=='allType'?'22rpx':'0',background:result.type=='allType'?setting.platformSetting.defaultColor:''}" v-if="result.icon" :src="result.icon"></image>
          <text>{{result.name}}</text>
        </view>
    </view>
    <view class="bottomHeight"></view>
  </scroll-view>
  <!-- 首页组件-公共产品分类装饰-->
  <custom-page-index-component :receiveData="sendIndexData" v-if="sendIndexData"></custom-page-index-component>

</view>
</template>

<script>

export default {
  data() {
    return {
      setting: null,
      taskType: [],
      typeGroup: [],
      currentItem: {},
      sendIndexData: null,
      title: null,
      params: {
        parentId: ""
      },
      positionTab: ""
    };
  },
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log("===options=====", options);
    let that = this;
    let sendIndexData = JSON.stringify({
      title: 'noTitle',
      url: "task_type_groups",
      params: {}
    });
    that.setData({
      sendIndexData: sendIndexData,
      title: {
        androidTemplate: "pupu_product_search",
        jsonData: {
          bgColor: getApp().globalData.setting.platformSetting.topBgColor,
          title: "请输入关键词搜索"
        }
      }
    });
    that.getTaskGroups(options.parentId);
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {},

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    this.setData({
        setting: getApp().globalData.setting,
    })
    wx.setNavigationBarColor({
      frontColor: getApp().globalData.setting.platformSetting.topColor.toLowerCase(),
      backgroundColor: getApp().globalData.setting.platformSetting.topBgColor
    });
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {},

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {},

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {},
  methods: {
    selectTypeFun:function(itemData){
        console.log("==selectTypeFun===",itemData);
        let that=this;
        let typeGroup=that.typeGroup;
        for (let i = 0; i < typeGroup.length; i++) {
          typeGroup[i].colorAtive = '#888';
          typeGroup[i].active = false;
        }
        for (let i = 0; i < typeGroup.length; i++) {
          if (itemData.id == typeGroup[i].id) {
            typeGroup[i].colorAtive = that.setting.platformSetting.defaultColor;
            typeGroup[i].active = true;
          }
        }
        if(itemData.id==0){
            that.getTypeData()
        }else{
            let taskType=JSON.parse(JSON.stringify(itemData.taskTypes));
            taskType.unshift({id:0,name:'全部',type:'allType',icon:'https://image1.sansancloud.com/xianhua/2020_6/19/20/13/9_43.jpg?x-oss-process=style/preview_120'})
            that.setData({
                taskType:taskType
            })
        }
        that.setData({typeGroup:typeGroup,currentItem: itemData});
        
    },
    //获取产品分类
    getTaskGroups: function (e, typeText) {
      console.log("====e=====", e);
      let that = this;
      let typeGroup = that.typeGroup;
      var customIndex = getApp().globalData.AddClientUrl("/wx_find_task_type_groups.html");
      getApp().globalData.showToastLoading('loading', true);
      wx.request({
        url: customIndex.url,
        header: getApp().globalData.header,
        success: function (res) {
          wx.hideLoading();
          console.log("==res====", res.data);
          if (res.data.errcode == 0) {
            typeGroup = res.data.relateObj.result;
            typeGroup.unshift({id:0,groupName:'全部'})
            console.log("typeGroup", that.typeGroup);
          } else {}
          that.getTypeData();
          console.log("==typeGroup==", typeGroup);
          if (typeGroup.length != 0) {
            for (let i = 0; i < typeGroup.length; i++) {
              typeGroup[i].colorAtive = '#888';
              typeGroup[i].active = false;
            }
            typeGroup[0].colorAtive = that.setting.platformSetting.defaultColor;
            typeGroup[0].active = true;
            that.setData({
              currentItem: typeGroup[0]
            });
          }
          that.setData({
            typeGroup: typeGroup
          });
          console.log("that.data.typeGroup", that.typeGroup);
          wx.hideLoading();
        },
        fail: function (res) {
          console.log("fail");
          wx.hideLoading();
          getApp().globalData.loadFail();
        }
      });
    },
    /* 获取数据 */
    getTypeData: function () {
      var that = this
      var customIndex = getApp().globalData.AddClientUrl("/wx_find_task_types.html")
      getApp().globalData.showToastLoading('loading', true)
      wx.request({
        url: customIndex.url,
        header: getApp().globalData.header,
        success: function (res) {
          wx.hideLoading()
          console.log(res.data)
          let dataArr=res.data.relateObj
          if (!dataArr || dataArr.length == 0) {
            that.setData({ taskType: [] })
          } else {
            dataArr.unshift({id:0,name:'全部',type:'allType',icon:'https://image1.sansancloud.com/xianhua/2020_6/19/20/13/9_43.jpg?x-oss-process=style/preview_120'})
            that.setData({ taskType: dataArr})
          }
          wx.hideLoading()
        },
        fail: function (res) {
          console.log("fail")
          wx.hideLoading()
          getApp().globalData.loadFail()
        }
      })
    },
    //跳转到订单页面
    linkUrl: function (e) {
      let linkUrl = e.currentTarget.dataset.link;
      getApp().globalData.linkEvent(linkUrl);
    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom2: function () {},
    setData: function (obj) {
      let that = this;
      let keys = [];
      let val, data;
      Object.keys(obj).forEach(function (key) {
        keys = key.split('.');
        val = obj[key];
        data = that.$data;
        keys.forEach(function (key2, index) {
          if (index + 1 == keys.length) {
            that.$set(data, key2, val);
          } else {
            if (!data[key2]) {
              that.$set(data, key2, {});
            }
          }

          data = data[key2];
        });
      });
    }
  }
};
</script>
<style>
@import "./index.css";
</style>